<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list one">
        <li id="first">01</li>
        <li class="mid">02</li>
        <li class="mid">03</li>
        <li class="mid">04</li>
        <li class="mid">05</li>
        <li name="last">06</li>
    </ul>
    <ul class="list two">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </ul>
</body>
<script>
    // 1. 在文档中通过 id名 class名 标签名 name属性 获取元素
    // document.getElementById()         => 存在就返回元素  不存在 => null
    // document.getElementsByClassName() => 存在就返回元素的集合  不存在 => []
    // document.getElementsByTagName()   => 存在就返回元素的集合  不存在 => []
    // document.getElementsByName()      => 存在就返回元素的集合  不存在 => []

    // 操作元素时 需要先将元素从数组中取出
    // var liList = document.getElementsByTagName("li");
    // console.log(liList);


    // 2. 通过父元素获取子代元素 ()
    // parent.getElementsByClassName() => 存在就返回元素的集合  不存在 => []
    // parent.getElementsByTagName()   => 存在就返回元素的集合  不存在 => []

    // 注意: 不能通过父元素对应id名 , name属性 获取元素 => 不存在此方法

    var one = document.getElementsByClassName("one")[0];  // 通过class获取元素默认取出第一个

    // var liList = one.getElementsByTagName("li");
    // console.log(liList);

    // var midList = one.getElementsByClassName("mid");
    // console.log(midList);


    // var result = one.getElementById("first");  // one.getElementById is not a function
    // console.log(result);

    var result = one.getElementsByName("last"); //  one.getElementsByName is not a function
    console.log(result);




</script>

</html>